<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹出层</title>
    <!-- <link rel="stylesheet" href="../css/modules/layer/default/layer.css">
    <script src="../jquery.js"></script>
    <script src="../modules/layer.js"></script> -->

    <!-- layui的核心css-->
    <link rel="stylesheet" href="../css/layui.css">
    <!-- layui的核心js-->
    <script src="../layui.js"></script>

</head>
<body>
<!-- 
    两种使用方式:
    1.作为独立组件使用
    2.layui模块化使用
 -->
    <span>内容1</span>
    <span>内容2</span>
    <span>内容3</span>
    <span id="sp">内容4</span>
    <script>
        layui.use('layer',function(){
        var layer = layui.layer;
        // layer.msg("222")

        // 信息框
        // layer.open({
        //     type:0,
        //     // title:'系统消息',
        //     // title:false,//不显示标题
        //     title:['标题','color:red'],
        //     // content可以传入任何文本或HTML
        //     content:'Hello'
        // })

        //  // 页面层
        //  layer.open({
        //     type:1,
        //     title:'系统消息',
        //     // content可以传入任何文本或HTML
        //     content:"<div style='height:200px;width:400px'>hello</div>"
        // })

        // ifream
        // layer.open({
        //     type:2,
        //     title:'系统消息',
        //     // content是一个url,如果不想让ifream出现滚动条，还可以让content:['url','no']
        //     content:"https://www.bilibili.com",
        //     //  content:["https://www.bilibili.com","no"],
        //     // area: '500px',  //设置宽度，高度自适应
        //     area:["800px","400px"] //设置宽高
        // })

      // tips层
        // layer.open({
        // type: 4,
        // content: ['内容', '#sp'] //数组第二项即吸附元素选择器或者DOM
        // });

     // //eg1
        // layer.alert('酷毙了', {icon: 1});
        //eg2
        // layer.msg('不开心。。', {icon: 5});
        // //eg3
        // layer.load(1); //风格1的加载

        

        });



        // layer.msg("122")

    </script>
</body>
</html>